<template>
  <div class="box">
    <picker
      mode="selector"
      :range="cityList"
      range-key="label"
      @change="changeCity"
      >{{ city.label || "北京" }}</picker
    >
    <!--显示地图 -->
    <map
      :show-location="true"
      :markers="markers"
      :include-points="markers"
      @labeltap="labeltap"
    >
    </map>
  </div>
</template>

<script>
import { getCity, getHouseMap } from "../../services/index";
export default {
  data() {
    return {
      cityList: [],
      city: {},
      areaId: "",
      areaList: [],
    };
  },
  //监听
  watch: {
    areaId: {
      handler: async function (value) {
        if (value) {
          let res = await getHouseMap(value);
          if ((res.status == 200 && res.body.length)) {
            this.areaList = res.body;
          }
        }
      },
      deep: true, //深度监听
      immediate: true, //立即触发
    },
  },
  computed: {
    markers() {
      return this.areaList.map((item, index) => {
        return {
          id: index,
          ...item.coord,
          label: {
            content: `${item.label}有${item.count}套房子`,
            color: "#ffd700",
            padding: 6,
            bgColor: "#000000cc",
            textAlign: "center",
            borderRadius: 5,
          },
          width: 0,
          height: 0,
        };
      });
    },
  },
  async onShow() {
    let res = await getCity();
    console.log("res....", res);
    if (res.status == 200) {
      this.cityList = res.body;
      this.city = this.cityList[0];
      this.areaId = this.city.value;
    }
  },
  methods: {
    changeCity(e) {
      //选中 城市
      this.city = this.cityList[e.target.value];
      this.areaId = this.cityList[e.target.value];
    },
    labeltap({ detail: { markerId } }) {
      this.areaId = this.areaList[markerId].value;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  picker {
    height: 60rpx;
    display: flex;
    align-items: center;
  }
  map {
    width: 100%;
    flex: 1;
  }
}
</style>